<template>
	<view>
		<view class="info-main">
			<view class="info-head-item">
				<view class="tit">头像</view>
				<view class="operation" @click="chooseImageFn('portrait')" data-key="portrait">
					<image :src="user.portrait ? user.portrait : '/static/images/head.png'"></image>
				</view>
			</view>
			<view class="info-item">
				<view class="tit">姓名</view>
				<view class="operation">
					<input placeholder="请输入姓名" maxlength="26" v-model="user.name" data-key="name"></input>
				</view>
			</view>
			<view class="info-item">
				<view class="tit">手机号</view>
				<view class="operation">
					<input placeholder="请输入手机号" maxlength="11" type="number" v-model="user.phone" data-key="phone"></input>
				</view>
			</view>
			<view class="info-item">
				<view class="tit">接受简历邮箱</view>
				<view class="operation">
					<input placeholder="请输入你的邮箱" maxlength="36" v-model="user.email" data-key="email"></input>
				</view>
			</view>
			<view class="info-item">
				<view class="tit">公司名称</view>
				<navigator v-if="user.company_id" class="operation" hover-class="hoverClass2" :url="`/pages/recruit/my-company/index?id=${user.company_id}`">
					{{user.title}}
					<text class="iconfontPT iconxiayibu pull-right"></text>
				</navigator>
				<view v-else class="operation">
					未添加公司信息
				</view>
			</view>
			<view class="info-item">
				<view class="tit">我的职务</view>
				<view class="operation">
					<input placeholder="请输入职务" maxlength="20" v-model="user.post" data-key="post"></input>
				</view>
			</view>
			<view class="info-item" style="border-bottom: none;">
				<view class="tit" style="margin-bottom: 30rpx;">上传工作照</view>
				<imageUpload @onUploadChange='handleChooseImage' :prop_photos='user.boss_work_img'  />

				<!-- <view class="form-module-desc">
					<view class="workPhoto-item" v-for="(item, index) in user.boss_work_img" :key="index">
						<image :src="`${host}/${item}`"></image>
						<text class="delete-box iconfont-zp iconZp-shanchu1" :data-index="index" @click="delImgFn"></text>
					</view>
					<view class="workPhoto-item add relative" if="user.boss_work_img.length < 3" @click="chooseImageFn()">
						<text class="iconfontPT iconhao x-y-center"></text>
					</view>
				</view> -->
			</view>
		</view>
		<btnTpl @confirmEvent="submitEventFn">保存</btnTpl>
		<image-compress style="position: absolute; top: 0rpx; overflow: hidden;" ref='imageCompress' />
	</view>
</template>

<script>
	import btnTpl from '../../components/recruit/btn-tpl.vue'
	import {
		getCompanyDtlInfo,
		setCompanyDtlInfo
	} from '../../../apis/recruit/index.js'
	import imageUpload from '../../components/public/image-upload.vue'

	export default {
		data() {
			return {
				uploadImage: false,
				user: {
					portrait: '', //头像
					post: "", //职位
					email: "", //
					phone: "",
					name: "", //
					company_id: '', //公司id
					title: '', //公司名称
					boss_work_img: [] //工作照
				},
				visible: false,
				actions: [{
						name: '取消',
						color: '#19be6b'
					},
					{
						name: '确定'
					}
				],
			}
		},
		computed: {
			host() {
				return this.$baseHost.car
			}
		},
		onShow() {
			if (this.uploadImage) return;
			this.getUserInfo()
		},
		components: {
			btnTpl,
			imageUpload
		},
		methods: {
			handleChooseImage(item, list) {
				this.user.boss_work_img = list
			},
			getUserInfo() {
				let _this = this;
				getCompanyDtlInfo().then(res => {
					if (res.code == 1) {
						let user = res.data.member;
						user.title = res.data.company.title
						if (res.data.member.boss_work_img.length == 1 && res.data.member.boss_work_img[0] == '') {
							res.data.member.boss_work_img = []
						}
						_this.user = res.data.member
						console.log(_this.user)
					}
				})
			},
			//编辑个人信息
			submitEventFn() {
				let _this = this,
					obj = JSON.parse(JSON.stringify(_this.user));

				obj.boss_work_img = obj.boss_work_img.join(',')

				setCompanyDtlInfo(obj).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '编辑成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
							})
						}, 1500);
					}
				})
			},
			//点击删除图片
			delImgFn(e) {
				let _this = this,
					index = e.currentTarget.dataset.index;

				_this.delImgIndex = index
				_this.delImgIndexvisible = true
			},
			chooseImageFn(key) {
				let _this = this;
				_this.uploadImage = true
				console.log(this.$refs.imageCompress.start)
				this.$uploadImage({
						imageCompressFn: this.$refs.imageCompress.start
					})
					.then(response => {
						_this.user[key] = key == 'portrait' ? response : _this.user.boss_work_img.push(response)
						_this.uploadImage = false
					})
			},
		}
	}
</script>

<style lang="less">
	.info-main {
		padding: 0 30rpx;
	}

	.info-item {
		padding: 30rpx 0 0;
		border-bottom: 1rpx solid #ccc;
		position: relative;
		overflow: hidden;
	}

	.info-head-item {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #ccc;
		position: relative;
		overflow: hidden;
	}

	.info-item .tit,
	.info-head-item .tit {
		color: #666;
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.info-item .operation {
		color: #333;
		font-size: 34rpx;
		line-height: 34rpx;
		margin-top: 22rpx;
		padding-bottom: 30rpx;
	}

	.info-head-item .tit {
		display: inline-block;
		line-height: 100rpx;
		font-size: 30rpx;
		color: #333;
	}

	.info-head-item .operation {
		width: 100rpx;
		height: 100rpx;
		float: right;
		border-radius: 50%;
	}

	.info-head-item .operation image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.form-module-desc {
		min-height: 40rpx;
		margin-top: 18rpx;
		overflow: hidden;
	}

	.workPhoto-item {
		margin: 14rpx 20rpx 0 0;
		width: 144rpx;
		height: 144rpx;
		display: inline-block;
		vertical-align: top;
		position: relative;
	}

	.workPhoto-item image {
		width: 100%;
		height: 100%;
	}

	.workPhoto-item.add {
		line-height: 144rpx;
		text-align: center;
		font-size: 80rpx;
		background: #f8f8f8;
	}

	.workPhoto-item.add .iconfont-zp {
		font-size: 140rpx;
		color: #CDCDCD;
	}

	.delete-box {
		position: absolute;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, .3);
		width: 144rpx;
		height: 144rpx;
		text-align: center;
		font-size: 48rpx;
		line-height: 144rpx;
		color: #fff;
	}
</style>
